<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/layui/css/modules/layer/default/layer.css}">
    <script th:src="@{/js/jquery-3.3.1.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
    <script th:src="@{/layui/lay/modules/layer.js}"></script>
    <script th:src="@{/js/index.js}"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*.head-nav{*/
        /*    width: 100%;*/
        /*}*/
        /*.nav-item{*/
        /*    float: left;*/
        /*    width: 50%;*/
        /*    height: 60px;*/
        /*    text-align: center;*/
        /*    line-height: 60px;*/
        /*    font-size: 30px;*/
        /*    border-bottom: 5px solid white;*/
        /*}*/
        /*.nav-item:active{*/
        /*    border-bottom: 5px solid deepskyblue;*/
        /*    color: deepskyblue;*/
        /*}*/
        a:active{
            color: deepskyblue;
            text-decoration: none;
        }
        .cityClass{
            display: none;
        }
    </style>
</head>
<body>
<!--    <div class="head-nav">-->
<!--        <div class="nav-item">-->
<!--            <a th:href="@{/}">首页</a>-->
<!--        </div>-->
<!--        <div class="nav-item">-->
<!--            <a th:href="@{/history}">历史</a>-->
<!--        </div>-->
<!--    </div>-->
    <div class="bg-img">
        <img style="width: 100%" th:src="@{/img/1.png}">
    </div>
    <div class="container-fluid">
        <div class="col-xs-12">
            <div class="col-xs-12">
                <h4>出差地点</h4>
            </div>
            <form class="form-inline col-xs-12">
                <div>
                    <div class="form-group">
                        <select class="form-control" id="province" onchange="provinceChange()"></select>
                    </div>
                    <div class="form-group">
                        <select class="form-control" id="city"></select>
                    </div>
                </div>
            </form>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-12">
                <h4>出差时间</h4>
            </div>
            <div class="col-xs-12">
                <form class="form-inline col-xs-12">
                    <div class="form-group">
                        <input type="date" id="startDate" class="form-control" required>
                    </div>
                    <div class="form-group">
                        至
                    </div>
                    <div class="form-group">
                        <input type="date" id="endDate" class="form-control" required>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-12">
                <h4>出差事由</h4>
            </div>
            <div class="col-xs-12">
                <select class="form-control" id="cause">
                    <option value="1">培训</option>
                    <option value="2">会议</option>
                    <option value="3">调研</option>
                    <option value="4">招生宣传</option>
                </select>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="col-xs-12">
                <h4>职务级别</h4>
            </div>
            <div class="col-xs-12">
                <select class="form-control" id="level">
                    <option value="1">省部级</option>
                    <option value="2">厅局级</option>
                    <option value="3">普通人员</option>
                </select>
            </div>
        </div>
        <div class="col-xs-12" style="margin-top: 30px;">
            <a type="button" class="btn btn-primary btn-block" onclick="commit1()">确认</a>
        </div>
    </div>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/distpicker.data.js}"></script>
    <script th:src="@{/js/distpicker.js}"></script>
    <script th:src="@{/js/main.js}"></script>
</body>
</html>